<template>
	<zero-custom-bar :effect="false" color="#fff" title='完善车辆信息'
		backgroundColor="linear-gradient(180deg, #FE9B23 0%, #FEA71D 100%)" :singleIcon="true">

	</zero-custom-bar>
	<view class="header-title">
		<view class="">
			<image src="../../static/icon5.png" mode="widthFix"></image>
			<text>支持年检、保养、洗车等服务</text>
		</view>
		<view class="">
			<image src="../../static/icon6.png" mode="widthFix"></image>
			<text>个人信息安全保障</text>
		</view>
	</view>
	<view class="car-number">
		<view class="upload-card" @click="onUpload">
			<image src="../../static/icon7.png" mode=""></image>
			<text>上传行驶证自动识别(认证)</text>
		</view>
		<text class="number">车牌号码</text>
		<my-keyBoard @confirmKey="confirm" :keyvalue="form.carNumber"></my-keyBoard>
	</view>
	<view class="box">
		<view class="item" @click="onBrand">
			<text class="label">选择品牌</text>
			<text class="placeholder">{{form.carBrand || '请选择'}}</text>

			<image class="right" src="/static/right.png" mode=""></image>
		</view>
		<view class="item" @click="onSeries">
			<text class="label">品牌车系</text>
			<text class="placeholder">{{form.carSeries || '请选择'}}</text>
			<image class="right" src="/static/right.png" mode=""></image>
		</view>
		<view class="item" @click="onCarType">
			<text class="label">具体车型</text>
			<text class="placeholder">{{form.carType || '请选择'}}</text>
			<image class="right" src="/static/right.png" mode=""></image>
		</view>
		<picker mode="date" :value="form.registrationDate" @change="bindDateChange">
			<view class="item">
				<text class="label">注册日期</text>
				<text class="value" v-if="form.registrationDate">{{form.registrationDate}}</text>
				<text class="placeholder" v-else>请选择</text>
				<image class="right" src="/static/right.png" mode=""></image>
			</view>
		</picker>

		<view class="item">
			<text class="label">车架号</text>

			<input type="text" placeholder="请输入" v-model="form.vinCode" placeholder-class="placeholder">
			<!-- <image class="right" src="/static/right.png" mode=""></image> -->
		</view>
		<view class="item">
			<text class="label">发动机号</text>
			<input type="text" placeholder="请输入" v-model="form.engineCode" placeholder-class="placeholder">
			<!-- <image class="right" src="/static/right.png" mode=""></image> -->
		</view>


	</view>
	<view class="box">
		<view class="item">
			<text class="label">车辆归属</text>
			<view class="radio-group">
				<view class="radio-item" @click="handleRadio(1,'0')">
					<image :src="form.carOwnership==='0'?'/static/radio-act.png':'/static/radio.png'" mode=""></image>
					<text>个人</text>
				</view>
				<view class="radio-item" @click="handleRadio(1,'1')">
					<image :src="form.carOwnership=='1'?'/static/radio-act.png':'/static/radio.png'" mode=""></image>
					<text>公司</text>
				</view>
			</view>
		</view>
		<view class="item">
			<text class="label">使用性质</text>
			<view class="radio-group">
				<view class="radio-item" @click="handleRadio(2,'0')">
					<image :src="form.useType==='0'?'/static/radio-act.png':'/static/radio.png'" mode=""></image>
					<text>非营运</text>
				</view>
				<view class="radio-item" @click="handleRadio(2,'1')">
					<image :src="form.useType==='1'?'/static/radio-act.png':'/static/radio.png'" mode=""></image>
					<text>营运</text>
				</view>
			</view>
		</view>
		<view class="item">
			<text class="label">座位规格</text>
			<view class="radio-group">
				<view class="radio-item" @click="handleRadio(3,'0')">
					<image :src="form.carSpecification==='0'?'/static/radio-act.png':'/static/radio.png'" mode=""></image>
					<text>9座及以下\n(非面包)</text>
				</view>
				<view class="radio-item" @click="handleRadio(3,'1')">
					<image :src="form.carSpecification=='1'?'/static/radio-act.png':'/static/radio.png'" mode=""></image>
					<text>9座及以下\n(面包车)</text>
				</view>
			</view>
		</view>
		<view class="item">
			<text class="label">是否检过车</text>

			<view class="radio-group">
				<view class="radio-item" @click="handleRadio(4,'1')">
					<image :src="form.checkFlag=='1'?'/static/radio-act.png':'/static/radio.png'" mode=""></image>
					<text>是</text>
				</view>
				<view class="radio-item" @click="handleRadio(4,'0')">
					<image :src="form.checkFlag==='0'?'/static/radio-act.png':'/static/radio.png'" mode=""></image>
					<text>否</text>
				</view>
			</view>
		</view>
		<picker mode="date" @change="bindLastDateChange">
			<view class="item">
				<text class="label">最近一次检车</text>

				<text class="value" v-if="form.checkDate">{{form.checkDate}}</text>
				<text class="placeholder" v-else>请选择</text>
				<image class="right" src="/static/right.png" mode=""></image>
			</view>
		</picker>


	</view>
	<button class="btn" @click="onSubmit">提交</button>

</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		carInfoSave,
		carLicenceOcr,
		carShow

	} from '@/api'
	import {
		uploadFile
	} from '@/utils/request.js'
	import {
		onLoad,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app'
	import {wxOpenid,checkLogin} from '@/utils/login-sdk.js'
	onLoad(async(params)=>{
		if(params.carId){
			getCarInfo(params.carId)
		}
		/** 品牌 */
		uni.$on('selectBrand',async item=>{
			form.carBrand = item.name
			form.carLogoPic = item.logo
			form.brandId = item.id
		})
		/** 车系 */
		uni.$on('selectSeries', item=>{
			form.carSeries = item.name
			form.seriesId = item.id
		})
		/** 车型 */
		uni.$on('selectCarType', item=>{
			form.carType = item.name
		})
		
	
	})
	

	/** 表单绑定数据*/
	const form = reactive({
		"licensePicUrl": "",
		"carNumber": "",
		"memberId": '',
		"carBrand": "",
		"carSeries": "",
		"carType": "",
		"registrationDate": "",
		"vinCode": "",
		"engineCode": "",
		"carOwnership": "",
		"useType": "",
		"carSpecification": "",
		"checkFlag": "",
		"checkDate": "",
		"nextCheckDate": "",
		"carLogoPic": "",
		"brandId":"",
		"seriesId":""
	})
	/** 注册日期*/
	const bindDateChange = (e) => {
		form.registrationDate = e.detail.value
	}
	/** 最后一次检车*/
	const bindLastDateChange = (e) => {
		form.checkDate = e.detail.value
	}
	/**
	 * @index 第几个选项
	 * state 状态
	 */
	const handleRadio = (index, state) => {
		console.log(index, state)
		if (index == 1) {
			form.carOwnership = state
			
		}
		if (index == 2) {
			form.useType = state
			
		}
		if (index == 3) {
			form.carSpecification  = state
			
		}
		if (index == 4) {
			form.checkFlag  = state
			
		}
	}
	/** 年检 */
	const bindInspection = () => {
		uni.navigateTo({
			url: "/pages/inspection/inspection"
		})
	}
	/** 获取车辆信息 - 修改用*/
	const getCarInfo = async(id)=>{
		const res = await carShow({id})
		form.id = id
		for(let key in form){
			for(let i in res.result){
				if(key==i){
					form[key] = res.result[i]
				}
			}
		}
		console.log(form)
		
	}
	/** QCR认证 */
	const onUpload = ()=>{
		uni.chooseImage({
			count:1,
			success: async (res) => {
				uni.showLoading({
					mask:true
				})
				const data = await uploadFile(res.tempFilePaths[0])
				const result = JSON.parse(data.data)
				const qcr = await carLicenceOcr({uploadUrl:result.data.url})
				form.carNumber = qcr.result.carNumber
				form.engineCode = qcr.result.engineCode
				form.registrationDate = qcr.result.registrationDate
				form.useType = qcr.result.useType
				
				form.vinCode = qcr.result.vinCode
				form.carSpecification = qcr.result.carSpecification
				form.carOwnership = qcr.result.carOwnership
				uni.hideLoading()
			}
		})
	}
	/** 选择品牌*/
	const onBrand = ()=>{
		uni.navigateTo({
			url:'/pages/brand/brand'
		})
	}
	/** 选择车系 */
	const onSeries = ()=>{
		if(!form.carBrand){
			uni.showToast({
				title:'请先选择车牌',
				icon:'none'
			})
			return false
		}
		uni.navigateTo({
			url:'/pages/series/series?brandId='+form.brandId
		})
	}
	/** 选择车型 */
	const onCarType = ()=>{
		if(!form.carSeries){
			uni.showToast({
				title:'请先选择车系',
				icon:'none'
			})
			return false
		}
		uni.navigateTo({
			url:"/pages/carType/carType?seriesId="+form.seriesId
		})
	}
	/**车牌号*/
	const confirm = (e)=>{
		
		form.carNumber = e
	}
	/** 提交表单 */
	const onSubmit = async()=>{
		if(!form.carNumber){
			uni.showToast({
				title:'车牌号不能为空',
				icon:'none'
			})
			return false
		}
		if(!form.carBrand	){
			uni.showToast({
				title:'品牌不能为空',
				icon:'none'
			})
			return false
		}
		// if(!form.carSeries){
		// 	uni.showToast({
		// 		title:'车系不能为空',
		// 		icon:'none'
		// 	})
		// 	return false
		// }
		if(!form.carType){
			uni.showToast({
				title:'车型不能为空',
				icon:'none'
			})
			return false
		}
		if(!form.registrationDate){
			uni.showToast({
				title:'注册日期不能为空',
				icon:'none'
			})
			return false
		}
		if(!form.vinCode){
			uni.showToast({
				title:'车架号不能为空',
				icon:'none'
			})
			return false
		}
		if(!form.engineCode){
			uni.showToast({
				title:'发动机号不能为空',
				icon:'none'
			})
			return false
		}
		if(form.carOwnership===''){
			uni.showToast({
				title:'车辆归属不能为空',
				icon:'none'
			})
			return false
		}
		if(form.useType===''){
			uni.showToast({
				title:'使用性质不能为空',
				icon:'none'
			})
			return false
		}
		if(form.carSpecification===''){
			uni.showToast({
				title:'作为规格不能为空',
				icon:'none'
			})
			return false
		}
		if(form.checkFlag===''){
			uni.showToast({
				title:'是否检车不能为空',
				icon:'none'
			})
			return false
		}
		if(!form.checkDate){
			uni.showToast({
				title:'最近检车时间不能为空',
				icon:'none'
			})
			return false
		}
		uni.showLoading({
			mask:true
		})
		
		const {memberId} = await wxOpenid()
		form.memberId = memberId
		const res = await carInfoSave(form)
		uni.hideLoading()
		uni.navigateBack()
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #FE9B23 0%, #FFB32B, #F7F4F0 49%, ) no-repeat;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		background-attachment: fixed
	}

	.header-title {
		display: flex;
		justify-content: space-between;
		width: 640rpx;
		margin: 60rpx auto 24rpx;

		view {
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				display: block;
				width: 24rpx;
				margin-right: 8rpx;
			}

			text {
				font-weight: 400;
				font-size: 24rpx;
				color: #FFF6EA;

			}
		}
	}

	.car-number {
		width: 702rpx;
		height: 474rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		margin: 0 auto;
		overflow: hidden;

		.upload-card {
			width: 640rpx;
			height: 201rpx;
			background: rgba(255, 221, 179, 0.28);
			border-radius: 28rpx;
			margin: 34rpx auto 42rpx;
			overflow: hidden;

			image {
				display: block;
				width: 53rpx;
				height: 47rpx;
				margin: 55rpx auto 14rpx;
			}

			text {
				display: block;
				text-align: center;
				font-size: 30rpx;
				color: #FE9C24;
			}

		}

		.number {
			font-weight: bold;
			font-size: 30rpx;
			color: #2b2b2b;
			display: block;
			margin-left: 32rpx;
			margin-bottom: 28rpx;

			&::before {
				content: "*";
				color: #FF2525;
			}
		}
	}

	.box {
		width: 640rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		margin: 20px auto;
		padding: 0 30rpx;

		.item {
			height: 99rpx;
			display: flex;
			align-items: center;

			.label {
				display: block;
				font-size: 28rpx;
				color: #2B2B2B;
				width: 220rpx;
			}

			.right {
				display: block;
				width: 48rpx;
				height: 48rpx;
			}

			.placeholder {
				font-size: 26rpx;
				color: #A7A7A7;
				flex: 2;
			}

			input,
			.value {
				font-weight: 400;
				font-size: 26rpx;
				color: #2B2B2B;
				flex: 2;
			}

			.radio-group {
				display: flex;
				flex: 2;

				.radio-item {
					display: flex;
					align-items: center;
					flex: 2;

					image {
						display: block;
						width: 48rpx;
						height: 48rpx;
						flex-shrink: 0;
					}

					text {
						font-size: 28rpx;
						color: #2B2B2B;
					}
				}
			}
		}
	}

	.btn {
		width: 640rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #FFC53D 0%, #FE9B23 51%, #FFC53D 100%);
		box-shadow: 4rpx 12rpx 18rpx 0rpx rgba(254, 155, 35, 0.25);
		border-radius: 28rpx;
		margin: 50rpx auto;
		font-weight: bold;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		// 写在需要添加底部边距的盒子上

	}
</style>